<template>
	<view>
		<view class="type">
			<text>消费类型查询：</text>
			<uni-easyinput trim="all" style="margin-top: 10rpx;" v-model="time" focus placeholder="月份格式:yyyy-mm"></uni-easyinput>
			<button type="primary" style="margin-top: 20rpx;" size="mini" @click="search()">按月份查询</button>
			<uni-easyinput trim="all" style="margin-top: 20rpx;" v-model="week" focus placeholder="请直接输入第几周,周格式:n 注意请先输入月份"></uni-easyinput>
			<button type="primary" style="margin-top: 20rpx;" size="mini" @click="searchWeek()">按周查询</button>
			
		</view>
		<canvas style="margin-top: 50rpx;" id="myEcharts"></canvas>
	</view>
</template>

<script>
import * as echarts from 'echarts';
import bill from '../../api/pay.js';
export default {
	data() {
		return {
			time: '',
			week: '',
			timeText:'',
			chartInstance: null,
			allDate: null //服务器返回的数据
		};
	},
	mounted() {
		this.now()
		this.initCharts();
		this.getData();
	},
	
	methods: {
		now(){
			var date =new Date();
			
			var year= date.getFullYear();
			
			var month=date. getMonth()+1;
			this.time=year+'-'+month
			console.log(this.time)
		},		search(){
			this.initCharts();
			this.getData();
		},
		searchWeek(){
			if(this.time){
				this.initCharts2();
				this.getDataWeek();
			}
			else{
				console.log("月为空")
			}
		},
		initCharts() {
		let	vuethis =this;
			this.chartInstance = echarts.init(document.getElementById('myEcharts'));
			//对图表初始化配置的控制
			const initOption = {
				title: {
					text: '账单统计:'+vuethis.time+"月",
					left: 'left',
					title: {}
				},
				tooltip: {
					trigger: 'item'
				},
				legend: {
					orient: 'vertical',
					left: 'right'
				}
			};
			this.chartInstance.setOption(initOption);
		},
		
		initCharts2() {
		let	vuethis =this;
			this.chartInstance = echarts.init(document.getElementById('myEcharts'));
			//对图表初始化配置的控制
			const initOption = {	
				title: {
					text: '账单统计:'+vuethis.time+"月第"+vuethis.week+"周",
					left: 'left',
					title: {}
				},
				tooltip: {
					trigger: 'item'
				},
				legend: {
					orient: 'vertical',
					left: 'right'
				}
			};
			this.chartInstance.setOption(initOption);
		},
		async getData() {
			let vuethis = this;
			await bill.getMenBillTypeMonth(this.time).then(response => {
				this.allDate = response.data.data.list;
				var dataOption = {
					series: [
						{
							label: {
								fontSize: '12',
								fontWeight: 'bold'
							},
							name: '订单情况',
							type: 'pie',
							color: ['#288df6', '#5853ed', '#75bedc','#9fb725','#b78066'],
							radius: '55%',
							center: ["40%", "70%"], //第一个调左右，第二个是上下
							
							data: (function() {
								var res = [];
								for (var i = 0; i < vuethis.allDate.length; i++) {
									res.push({
										//通过把result进行遍历循环来获取数据并放入Echarts中
										name: vuethis.allDate[i].type,
										value: vuethis.allDate[i].value
									});
								}
								return res;
							})(),
							// 非动态加载
							// data: [
							// 	{
							// 		value: vuethis.allDate[0].value,
							// 		name: vuethis.allDate[0].type
							// 	},
							// 	{
							// 		value: vuethis.allDate[1].value,
							// 		name: vuethis.allDate[1].type
							// 	},
							// 	{
							// 		value: vuethis.allDate[2].value,
							// 		name: vuethis.allDate[2].type
							// 	}
							// ],
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}
					]
				};

				this.chartInstance.setOption(dataOption);
			});
		},
		async getDataWeek() {
			let vuethis = this;
			await bill.getMenBillTypeWeek(this.time,this.week).then(response => {
				this.allDate = response.data.data.list;
				var dataOption = {
					series: [
						{
							label: {
								fontSize: '12',
								fontWeight: 'bold'
							},
							name: '订单情况',
							type: 'pie',
							color: ['#288df6', '#5853ed', '#75bedc','#9fb725','#b78066'],
							radius: '55%',
							center: ["40%", "70%"], //第一个调左右，第二个是上下
							
							data: (function() {
								var res = [];
								for (var i = 0; i < vuethis.allDate.length; i++) {
									res.push({
										//通过把result进行遍历循环来获取数据并放入Echarts中
										name: vuethis.allDate[i].type,
										value: vuethis.allDate[i].value
									});
								}
								return res;
							})(),
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}
					]
				};
		
				this.chartInstance.setOption(dataOption);
			});
		}
	
	}
};
</script>

<style></style>
